<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="个人中心"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
      <template #right>
        <van-icon name="wap-home-o" color="#f00" size="6vw" />
      </template>
    </van-nav-bar>
    <!-- 1.0 用户信息 -->
    <!-- @click="$router.push({ path: '/user_edit' })" -->
    <router-link :to="`/userEdit?id=${$route.query.id}`" class="info">
      <div class="avatar">
        <van-image
          round
          fit="cover"
          width="100%"
          height="100%"
          :src="userinfo.head_img"
        />
      </div>
      <div class="center">
        <p class="username">
          <!-- 其实性别旧两个，可以通过 v-if v-else 互斥显示渲染一个 -->
          <i class="iconfont iconxingbienan" v-if="userinfo.gender"></i>
          <i class="iconfont iconxingbienv" v-else></i>
          <span>{{ userinfo.nickname }}</span>
        </p>
        <p v-if="userinfo.create_date" class="date">
          {{ userinfo.create_date | formatDate }}
        </p>
      </div>
      <i class="iconfont iconjiantou1"></i>
    </router-link>
    <!-- 2.0 单元格 -->
    <MyCell title="我的关注" value="关注的用户" to="/user_follow"></MyCell>
    <MyCell title="我的跟帖" value="跟帖/回复" to="/user_comment"></MyCell>
    <MyCell title="我的收藏" value="文章/视频" to="/user_star"></MyCell>
    <MyCell title="设置" value="" @click="cellFn"></MyCell>
    <!-- 3.0 退出按钮 -->
    <MyButton @click="logoutFn">退出</MyButton>
  </div>
</template>

<script>
import MyCell from "../components/MyCell.vue";
import MyButton from "../components/MyButton.vue";
import { userDetailByIdAPI } from "../apis/user";
import request from "../utils/request.js";
import { removeToken, removeUserId } from "../utils/localData";
export default {
  components: {
    MyCell,
    MyButton,
  },
  data() {
    return {
      // 💥注意：这里的初始值是对象，如果是空字符串，模板中的点语法引用就会报错
      userinfo: {},
    };
  },
  methods: {
    cellFn() {
      console.log("我这里不是跳转，只是一个普通点击事件处理函数");
      // this.$router.push({ path: "/attention" });
    },
    logoutFn() {
      // 1. 询问是否退出 - Dialog 弹出框
      // 2. 用户点击了确定
      //    确认：
      //     2.1.1. 清除token
      //     2.1.2  跳转到登录页
      //    取消：不做任何事情
      this.$dialog
        .confirm({
          title: "是否退出？",
        })
        .then(() => {
          // console.log("点击了确认");
          // 清除token
          // localStorage.removeItem('hmtt_token')
          // 调用封装后的 token 方法
          removeToken();

          removeUserId();
          // 跳转到首页
          //  .push()      跳转到某个页面 - 点击后退可以返回个人中心
          //  .replace()   替换成某个页面 - 点击后退就不能返回个人中心了。
          this.$router.replace({ path: "/" });
        })
        // 取消：不做任何事情
        .catch(() => {});
    },
  },
  async created() {
    // 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
    const id = this.$route.query.id;
    // 根据 id 获取用户信息
    const res = await userDetailByIdAPI(id);
    console.log(res);
    // 获取用户头像是相对路径，需要拼接请求基地址
    // 拼接后赋值给自己
    res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
    // 把处理后的数据绑定到 data 中，再用于页面展示
    this.userinfo = res.data.data;
  },
};
</script>

<style lang="less" scoped>
/* css tree 插件 => 选中HTML结构 => Ctrl + Shift + P => 输入 csstree  */
.info {
  height: 120px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 5px solid #ddd;
  .avatar {
    width: 80px;
    height: 80px;
  }
  .center {
    flex: 1;
    margin-left: 20px;
    .username {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .iconfont {
      margin-right: 5px;
    }
    .iconxingbienan {
      color: #75b9eb;
    }
    .iconxingbienv {
      color: #f00;
    }
    .date {
      font-size: 14px;
      color: #666;
    }
  }

  .iconjiantou1 {
    font-size: 14px;
  }
}
</style>